import Vue from 'vue'
import App from './App.vue'
import './asset/style.css'
import 'animate.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

// 还原页面的排版和布局。
// 所需要的数据已经给出。
// 对组件进行合理的划分，可以参考这样的划分方式：单个商品概述为一个组件、商品列表为一个组件、头部的compare比较列表为一个组件、对比页面为一个组件、对比页面中的商品详情为一个组件
// 在商品列表页面中点击每个商品右上角的加号，可以切换成选中状态，且头部的比较列表能展示出对应的选中商品。点击选中商品的对勾能够取消选中状态，且头部比较列表的展示也对应的消失。
// 一次最多只能选中三件商品
// 当没有选中商品的时候，头部的比较列表是隐藏状态
// 当选中一件商品的时候，头部比较列表显示，但是compare按钮是灰色不可点击状态
// 当选中两件以及两件以上的商品时候，compare处于可点击状态。
// 点击compare按钮视图从列表页面切换到比较页面，如果是两件商品就两件商品进行比较，如果是三件商品就三件商品进行比较。
// 正确渲染出商品详情比较的视图，且点击商品比较页面的X号， 可以切换到商品列表页面。
// 所有的动画效果都可以忽略。
// （三）评分标准：
// 1.还原页面的排版和布局（5分）；
// 2.请求 “http://121.89.213.194:3001/api/bottle”此接口获取数据渲染页面（10分）；
// 3.合理拆分组件，可以参考给出的拆分方式，或者其他的拆分凡是皆可（仅写一个组件不得分）（5分）；
// 4.点击商品的 + 号，能够选中商品，点击X号能够取消商品的选中（10分）；
// 5.头部比较列表要与商品的选中和取消同步（10分）；
// 6.操作头部比较列表的X按钮可以同步取消列表中选中的商品（10分）
// 7.限制最多能选中三件商品（10分）
// 8.仅选中一件商品的时候，compare按钮是灰色且不可以被点击（10分）
// 9.未选中商品的时候，头部比较列表是隐藏状态，有选中商品头部列表才显示（10分）；
// 10.点击compare按钮可以切换至比较页面，在比较页面点击X可以切换至列表页面（10分）；
// 11.根据选中的商品，实现比较页面的额渲染。（10分）；
